<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      width="700px"
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="工序名称" prop="processId">
          <el-input
            v-model="processName"
            placeholder="请选择"
            clearable
            :style="{ width: '100%' }"
            readonly
            @click.native="visiblea = true"
          ></el-input>
        </el-form-item>
        <el-form-item label="工位编码" prop="actionCode">
          <el-input
            v-model="formData.actionCode"
            placeholder="请输入工位编码"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="工位名称" prop="actionName">
          <el-input
            v-model="formData.actionName"
            placeholder="请输入工位名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="工位单价" prop="actionPriceOne">
          <el-input
            v-model="formData.actionPriceOne"
            placeholder="请输入工位单价"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status" required>
          <el-switch
            v-model="formData.status"
            :active-value=0
            :inactive-value=1
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
      <div>
        <!--   工序选择     -->
        <processList ref="workCenterList" :visible.sync="visiblea" @Ok="processOk"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import processList from "./processList"
  import {deptTreeSelect} from "@/api/system/user";

  export default {
    inheritAttrs: false,
    components: {Treeselect, processList},
    props: ["title", "visible", "item"],
    data() {
      return {
        formData: {
          processId:"",
          actionCode: "",
          actionName: "",
          actionPriceOne: 0,
          status: 0,
        },
        rules: {
          processId: [
            {
              required: true,
              message: "请选择工序",
              trigger: "change",
            },
          ],
          actionCode: [
            {
              required: true,
              message: "请输入工位编码",
              trigger: "blur",
            },
          ],
          actionName: [
            {
              required: true,
              message: "请输入工位名称",
              trigger: "blur",
            },
          ],
          actionPriceOne: [
            {
              required: true,
              message: "请输入工位单价",
              trigger: "blur",
            },
          ],
        },
        processIdOptions: [],
        statusOptions: [],

        /**
         * 工序选择
         */
        visiblea:false,
        processName:""

      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      async getDictText() {
        this.$nextTick(() => {
          if (this.item) {
            this.formData = JSON.parse(JSON.stringify(this.item));
            this.processName = this.item.processIdText;
          }
        });
      },
      onOpen() {
        this.getDictText();
      },
      onClose() {
        this.$refs["elForm"].resetFields();
        this.processName = "";
        this.close();
      },
      close() {
        this.$emit("update:visible", false);
      },
      handleConfirm() {
        let form = JSON.parse(JSON.stringify(this.formData));
        console.log(form);
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          this.$emit("Ok", form);
          this.close();
        });
      },

      // 子页面数据接收
      processOk(item) {
        this.formData.processId = item.id;
        this.processName = item.name;
        this.visiblea = false;
      }
    },
  };
</script>
<style>
</style>
